Intro

0:00

Environment setup

2:16

Auth Setup

8:18

Auth UI

15:30

MongoDB, Prisma setup

58:53

NextAuth Setup

1:17:54

Register Functionality

1:32:20

Login Functionality and Social Login (Google and Github)

1:40:23

Sidebar, Navigation and Layout

1:57:42

Users screen and Conversations screen, Conversation Creation

2:58:39

Messages creation, Message Image upload

4:12:34

Profile Drawer

5:29:12

Settings functionality, Modal component

6:01:20

Group chat functionality, Image Modal, Loading states

6:53:39

Real time messages, conversations, read receipts and active status with Pusher

7:43:15

Deploy to Vercel, fix Google and Github social sign in in deployment

8:44:03
Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023)
Code With Antonio
13 тыс. Отметки "Нравится"
6 мая 2023
Avatars from: https://www.freeimages.com/photograph... Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord Github & Live Website: https://www.codewithantonio.com/proje... Special thanks to Josh Tried Coding from which I got inspiration to use Pusher since Socket.io does not work with Next 13.3 (   / @joshtriedcoding  ) Master the art of building a real-time Messenger clone using the latest web development technologies. In this comprehensive tutorial, we'll walk you through the process of creating a fully-functional and visually stunning chat application that rivals the best in the industry. Key Features: - Real-time messaging using Pusher - Message notifications and alerts - Tailwind design for sleek UI - Tailwind animations and transition effects - Full responsiveness for all devices - Credential authentication with NextAuth - Google authentication integration - Github authentication integration - File and image upload using Cloudinary CDN - Client form validation and handling using react-hook-form - Server error handling with react-toast - Message read receipts - Online/offline user status - Group chats and one-on-one messaging - Message attachments and file sharing - User profile customization and settings - How to write POST, GET, and DELETE routes in route handlers (app/api) - How to fetch data in server React components by directly accessing the database (WITHOUT API! like Magic!) - Handling relations between Server and Child components in a real-time environment - Creating and managing chat rooms and channels Whether you're an experienced developer looking to expand your skillset or a beginner eager to learn the latest web development technologies, this tutorial has something for everyone. Join us on this exciting journey and take your web development skills to new heights! Timestamps 00:00 Intro 02:16 Environment setup 08:18 Auth Setup 15:30 Auth UI 58:53 MongoDB, Prisma setup 01:17:54 NextAuth Setup 01:32:20 Register Functionality 01:40:23 Login Functionality and Social Login (Google and Github) 01:57:42 Sidebar, Navigation and Layout 02:58:39 Users screen and Conversations screen, Conversation Creation 04:12:34 Messages creation, Message Image upload 05:29:12 Profile Drawer 06:01:20 Settings functionality, Modal component 06:53:39 Group chat functionality, Image Modal, Loading states 07:43:15 Real time messages, conversations, read receipts and active status with Pusher 08:44:03 Deploy to Vercel, fix Google and Github social sign in in deployment
11 видео
Learn Next & React and get Hired!
Code With Antonio

Расшифровка позволяет быстро находить в видео нужную информацию.

Code With Antonio

116 тыс. подписчиков

Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023)

Code With Antonio

116 тыс. подписчиков
<__slot-el>
<__slot-el>
420 588 просмотров 6 мая 2023 г. Learn Next & React and get Hired!
Avatars from: https://www.freeimages.com/photograph... Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord Github & Live Website: https://www.codewithantonio.com/proje... Special thanks to Josh Tried Coding from which I got inspiration to use Pusher since Socket.io does not work with Next 13.3 (   / @joshtriedcoding  ) Master the art of building a real-time Messenger clone using the latest web development technologies. In this comprehensive tutorial, we'll walk you through the process of creating a fully-functional and visually stunning chat application that rivals the best in the industry. Key Features: - Real-time messaging using Pusher - Message notifications and alerts - Tailwind design for sleek UI - Tailwind animations and transition effects - Full responsiveness for all devices - Credential authentication with NextAuth - Google authentication integration - Github authentication integration - File and image upload using Cloudinary CDN - Client form validation and handling using react-hook-form - Server error handling with react-toast - Message read receipts - Online/offline user status - Group chats and one-on-one messaging - Message attachments and file sharing - User profile customization and settings - How to write POST, GET, and DELETE routes in route handlers (app/api) - How to fetch data in server React components by directly accessing the database (WITHOUT API! like Magic!) - Handling relations between Server and Child components in a real-time environment - Creating and managing chat rooms and channels Whether you're an experienced developer looking to expand your skillset or a beginner eager to learn the latest web development technologies, this tutorial has something for everyone. Join us on this exciting journey and take your web development skills to new heights! Timestamps 00:00 Intro 02:16 Environment setup 08:18 Auth Setup 15:30 Auth UI 58:53 MongoDB, Prisma setup 01:17:54 NextAuth Setup 01:32:20 Register Functionality 01:40:23 Login Functionality and Social Login (Google and Github) 01:57:42 Sidebar, Navigation and Layout 02:58:39 Users screen and Conversations screen, Conversation Creation 04:12:34 Messages creation, Message Image upload 05:29:12 Profile Drawer 06:01:20 Settings functionality, Modal component 06:53:39 Group chat functionality, Image Modal, Loading states 07:43:15 Real time messages, conversations, read receipts and active status with Pusher 08:44:03 Deploy to Vercel, fix Google and Github social sign in in deployment
11 видео
Learn Next & React and get Hired!
Code With Antonio

Расшифровка позволяет быстро находить в видео нужную информацию.

Code With Antonio

116 тыс. подписчиков
Свернуть

813 комментариев

Olesia Tomilova
Введите комментарий
🎯 Key Takeaways for quick navigation: 02:26 🚀 You can initialize a new Next.js 13 project with Tailwind CSS support by running the `npx create-next-app` command with the `--typescript --tailwind` flags. 16:42 ⚙️ Use state variables and hooks like `useState` and `useCallback` to manage the state and logic of your components effectively. 19:14 📝 Implement form handling and validation using the `useForm` hook from `react-hook-form` to create interactive and responsive forms. 23:50 🎨 Style your components by applying CSS classes, and use the Tailwind CSS framework to achieve a sleek and responsive design for your application. 29:24 🏷️ Define TypeScript interfaces to specify the props that your components accept, making your code more readable and maintainable. 48:04 🧱 Structure your UI elements using nested divs and CSS classes to achieve desired layouts and styles in your React application. 50:19 🧩 Creating a new component for social buttons and importing React Icons. 01:03:09 🧩 Defining models and relations in Prisma for the User, Conversation, Account, and Message entities. 01:08:48 🔗 Establishing relationships between User and Conversation, User and Account, Conversation and Message, and Message and User. 01:15:03 🔄 Setting up relationships for sender and conversation IDs in the Message model for better data organization. 01:16:09 📝 Key takeaway: Verify that your MongoDB collections (users, accounts, conversations, messages) are created after running `npx Prisma DB push` and that Prisma successfully connects to MongoDB. 01:19:00 📝 Key takeaway: Install necessary packages, including `next-auth`, `@prisma/client`, `bcrypt`, and ensure you have the latest version of Next.js to support the app folder structure. 01:20:21 📝 Key takeaway: Create a Prisma client file (Prisma db.ts) in the "libs" folder inside the "app" directory, and export the client for use in authentication. 01:34:29 📝 Key takeaway: Implement the registration route by creating a "register" folder in the API directory and handling user registration, including password hashing and error handling. 01:56:49 🗄️ Managing user accounts and social logins by clearing user accounts and performing a hard reload to avoid conflicts during social login setup. 02:02:46 🔄 You can protect routes by using a middleware and the `useRouter` hook to check if a user is authenticated. 02:07:02 ⚡️ Create a middleware to protect routes and automatically redirect unauthorized users to the login screen. 02:26:34 📝 In the video, the presenter is working on creating a sidebar component for a messenger clone application. 02:27:01 📝 They are mapping over a list of routes to generate sidebar items dynamically. 02:30:31 📝 The presenter adds styles to the desktop sidebar items, including icons. 02:31:28 📝 They make use of the `clsx` library to conditionally apply CSS classes. 02:33:26 📝 They discuss making the sidebar responsive for mobile devices by adding a mobile footer component. 02:34:41 📝 The presenter creates a new action to fetch the current user's session information. 02:46:03 📝 The presenter updates the sidebar component to fetch and display the current user's information. 03:00:13 📚 An action called `getUsers` is created to fetch a list of users excluding the currently logged-in user. 03:15:12 🧩 The code handles both one-on-one conversations and group chats, ensuring data integrity and security. 03:32:04 🛠️ The tutorial creates an action to retrieve conversations, ordering them by the latest message and populating related data. 03:38:35 🔄 Messages will be updated dynamically using real-time sockets and Pusher in the application. 03:40:27 🧾 Special types, like `full message type` and `full conversation type`, are created to handle complex data structures in the app. 03:48:00 ⚙️ Creating a conversation box component to display individual conversations. 03:53:47 🔍 Creating a custom hook, `useOtherUser`, to find the other user in a conversation. 04:02:44 📩 The code is handling the display of messages and conversation details in a messaging app interface. 04:25:47 📱 Preparing the interface for mobile screens and adding a back button for navigation in the header. 04:29:22 🕵️‍♂️ Implement a profile drawer that opens when clicking the ellipsis menu icon. Configure its appearance with class names, size, and behavior. 04:31:11 📃 Inside the "body" component, set up initial styling by applying CSS classes like "flex-1 overflow-y-auto" to enable scrolling. 04:32:19 📨 In the "form" component, set up an "onSubmit" function to handle sending messages. Use the "useForm" hook and configure form fields, including message input. 04:33:42 📦 Style the "message input" component by applying CSS classes for text, padding, background color, and more to achieve the desired appearance. 04:34:49 🚀 Implement the form's "onSubmit" function to send messages. Use Axios to make a POST request to your API, passing the message and conversation ID. 04:35:31 🎨 Style the "form" component, including the message input and send button, to achieve the desired appearance using CSS classes and properties. 04:36:13 🖼️ Import icons like "hi photo" and "hi paper airplane" from the React Icons library to use in your components. 04:37:43 🤖 Verify the existence of the current user and their necessary details (e.g., ID and email) before processing the message creation. 04:38:10 📥 Parse the JSON data from the request body and extract the message content, image (if any), and conversation ID. 04:39:06 📩 Use Prisma to create a new message with data such as the message body, image (if any), sender, scene users, and conversation. Include the scene array and sender in the response. 04:40:21 🤝 Prepare the updated conversation data for future use (e.g., real-time updates with Pusher), but do not return it in the API response. 04:43:06 📤 Handle errors and responses from the API by logging errors, returning appropriate HTTP status codes, and returning the new message as JSON. 04:43:36 🌐 Set up the foundation for real-time updates with Pusher, which will be integrated in the future to provide users with real-time messaging capabilities. 04:44:08 🔧 Create a serverless API route to handle message creation and ensure that necessary data is extracted, validated, and processed. 04:45:39 🚦 Check for missing user information (ID and email) to ensure the request is authorized. Return a 401 status code for unauthorized requests. 04:50:19 🔄 Use "nextresponse.Json" to send the new message as part of the API response, even though it's not currently used, in anticipation of future real-time updates. 04:55:01 📷 Implemented Cloudinary image upload functionality in the message form. 04:56:37 🔗 Created a function for handling image uploads to Cloudinary and sending them as messages via the API. 05:14:22 🖼️ Implemented image rendering in messages when an image is present in the message data. 05:14:46 🎨 The video discusses creating a real-time messenger clone using technologies like Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, and Pusher in 2023. 05:39:50 📝 The speaker mentions that the code is using Headless UI to create smooth animations and accessibility features. 05:41:28 📝 The discussion shifts to working on the profile drawer component. 05:44:51 📝 They start configuring the appearance and behavior of a close button for the drawer. 05:49:25 📝 They demonstrate how the drawer can be opened and closed, including using the Escape key for accessibility. 05:50:24 📝 The speaker begins working on adding information about the user or group in the drawer, including email and joined date. 05:58:10 📝 They display the email of the user or the join date, depending on the type of conversation. 06:09:05 🔄 Center the modal content by wrapping it in a div with appropriate styles and classes. 06:30:04 🔄 The code uses Prisma to find an existing conversation by its ID and includes user data when fetching the conversation. If the conversation doesn't exist, it returns an error response. 06:55:36 📋 To create a modal dialog in a Next.js project, wrap the content within a `
8
Your tutorials are just awesome, loving it! Just a lil' suggestion: Instead of naming your apps like Messenger Clone, Discord Clone, build them as a new project. Feels much better to create a new project rather than a clone even if the features are same!
1
this is the first project i have so far taken this far without excessive bugs..thank you for making this an easier path..at one time i will look back when i have also learnt coding and am a pro and i will look at this project as the start of it all. isnt it nice
1
I have seen a lot of tutorials, but none with a presentation as well-organized and a teacher as well-spoken as this one. Excellent job, Antonio !
10
Once again. Antonio comes back with another banger tutorial. The videos you give out to the community really helps out everyone. Even people who isn't beginners. Thank you Antonio!!!
48
I'm only a couple of hours into the video but I just want to say "thank you so much" in advance. Your tutorials are the best I've ever seen out there on YT. Each of your projects combines multiple concepts into a very good project. Whenever I watch your videos, I feel overwhelmed, which for me is a good thing since it shows how much there is to learn. Thank you for your hard work. Really appreciate it :)
5
I'm not much of a comment writer, but his tutorial you've done is so brilliant I had to thank you for all the work you've put into it. Also, I suggest for other developers that are gonna try to do it to install the same versions of next and prisma. I've encountered some problems due to that 😅, like deleteMany not returning any conversation so my list didn´t update through pusher. Thank you again, Antonio!!❤
1
This is awesome! So often tutorials avoid the cutting edge tech stacks, really happy to see something so current and robust Antonio!
48
Antonia, How can I say this? I've learnt more from this Tutorial than my college classes that I paid thousands for. I'm forever grateful for what you have done for us. Thank you.
12
Hey antonio, please release more tutorials, I am nearly done with this one and I really learned a lot.
11
it's really awesome, I was afraid of Prisma. but now I understand and can realize everything. thanks, Antonio, for your great tutorial. Please keep going with the same stack with more projects.
1
This is the first tutorial I follow from start to finish and I have to thank you sir, it's a great one! I've learned much about Next13, Pusher, Prisma and Tailwind. Keep up the great work!
5
This is a great video no doubt. Learned a lot from this . But can you please provide any diagram of the full project to understand the full project first before coding . This will really helpful to understand the whole working concept.
1
This messenger chat app tutorial is truly comprehensive and amazing! I especially appreciate that this includes the final deployment! For next video could you make a full stack ecommerce app with deployment? Thank you so much!
8
Great tutorial! I am so glad you are putting up those on youtube for free, the quality is top notch better than courses that I have paid money for.A small question that I have is, what extension you are using to auto generate the import statements
5
I was trying to figure out how to implement Pusher in next.js 13 and this was exactly what I needed, even though I am not making a messenger app. Thanks for going in depth with such a great stack. Very cool.
OK, i have finally finished this build successfully! Everything worked as it should. Thanks to your step by step explanation. I absolutely learned so much from this and its the best on the internet or any school. Thankyou for putting this together. I know it took you a long time and a lot of hard work! Like I said before, absolutely brilliant! Thankyou so much! The only problem that i had is you used 'eu' for your pusher cluster and mine was actually 'us3' so something people to note.
5
Hi Antonio, from what I could understand by going through the Prisma docs and the examples available there it makes sense to me to use the @relation annotation on the "many" side of a one-to-many relation and simply an array of the other model on the "one" side, so let's say for a Post and Comment scenario we would have comments Comment[] in the Post model and a @relation annotation in the Comment model. Based on this, in the schema you've shown I'm struggling to make sense of the purpose of using the messageIds field in the Conversation model. It confused me so much that I felt we need to define a relation with the Message model using this field which caused the vscode extension mark it all red. But after many days of deliberation I realized that we shouldn't really be needing this field at all since we're anyways defining a one-to-many relation between Conversation and Message. Can you please help me understand the purpose of having both messageIds and messages fields in the Conversation model.
3
I think it would be better if we created constants for the pusher events and used them throughout the app instead of typing them individually everywhere, which is more error prone.
1
Super cool to see a new video from you. I learnt so much from these long form videos when I started coding. Especially cool because NextJS app router just became the recommended approach to writing modern code. Thanks for sharing!
9